<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>store中的num:{{ num }}</h1>

    <button @click="increase">+1</button>
    <button @click="increaseN({ n: 3 })">+n</button>
    <!-- 方式一： -->
    <button @click="$store.dispatch('increaseWait')">过一秒+1</button>
    <!-- 方式二： -->
    <button @click="increaseWait">过一秒+1</button>
    <button @click="increaseNWait({ n: 90 })">过一秒+n</button>

    <!-- 方式三 -->
    <!-- 传一个对象！！！！ -->
    <button @click="increaseNWait({ n: 20 })">过一秒+ n</button>
  </div>
</template>

<script>
  import { mapMutations, mapState, mapActions } from "vuex";
  export default {
    name: "Item",
    computed: {
      ...mapState(["count", "num"]),
    },
    methods: {
      ...mapMutations(["increase", "increaseN"]),

      increaseWait() {
        this.$store.dispatch("increaseWait");
      },
      increaseNWait(payload) {
        this.$store.dispatch("increaseNWait", payload);
      },

      // ...mapActions(["increaseWait", "increaseNWait"]),
      ...mapActions(["increaseWait", "increaseNWait"]),
    },
  };
</script>

<style></style>
